<template>
    <div class="container">
        <div class="category animated bounceInLeft">
            <h2>[基础产品]G2 可视化引擎</h2>
            <p class="desc">数据驱动，高度易用，可扩展的可视化图形语法。</p>
            <div class="demo-wrap">

            </div>
        </div>
        <div class="category animated bounceInRight">
            <h2>[扩展产品]G2Plot 开箱即用的图表库</h2>
            <p class="desc">开箱即用、易于配置、极致体验的通用图表库。</p>
            <div class="demo-wrap">

            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {defineComponent} from "vue"
import useG2Demo from "@/hooks/useG2Demo.hook.ts"

export default defineComponent({
    name: "G2",
    setup() {
        const {demoList, toggleDemo} = useG2Demo()

        return {
            demoList, toggleDemo
        }
    }
})
</script>

<style scoped lang="less">
@import "~@/common/css/demo.style.less";
</style>
